<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="app">
    <div style="padding:20px;text-align: left;">
      <button style="margin-left: 20px;"><a href="./home.html">主要</a></button>
      <button style="margin-left: 20px;"><a href="./heatmap.html">热力图</a></button>
      <button style="margin-left: 20px;"><a href="./trackPlayback.html">轨迹回放</a></button>
      <button style="margin-left: 20px;"><a href="./marker-text-label.html">点标记</a></button>
      <button style="margin-left: 20px;"><a href="./markerclusterer.html">点聚合</a></button>
      <button style="margin-left: 20px;"><a href="./mapType.html">地图类型切换</a></button>
      <button style="margin-left: 20px;"><a href="./graph.html">画图</a></button>
      <button style="margin-left: 20px;"><a href="./infoWindow.html">信息弹框</a></button>
      <button style="margin-left: 20px;"><a href="./tool.html">工具栏</a></button>
    </div>
    <div id="map" style="height: 680px"></div>
  </div>
  <div class="input-card" style="margin-top: 20px;">
    通用设置：
    <input type="checkbox" class="btn" id="angleFixed" />
    <label for="angleFixed">是否固定角度</label>
    <input type="checkbox" class="btn" id="isDisplay" checked />
    <label for="isDisplay">是否显示轨迹线（针对历史轨迹）</label>
  </div>
  <div class="input-card" style="margin-top: 20px;">
    <label for="speed1">
      speed:&nbsp;
      <input id="speed1" type="range" min="10" max="999" step="10" value="100" />
    </label>
    <label for="distance1">
      distance:&nbsp;
      <input id="distance1" type="range" min="0" max="1000" step="10" value="0" />
    </label>
    <div style="margin-top: 20px;">
      小车1(历史双轨迹)
      <input type="button" class="btn" value="开始动画" id="start1" />
      <input type="button" class="btn" value="暂停动画" id="pause1" />
      <input type="button" class="btn" value="继续动画" id="resume1" />
      <input type="button" class="btn" value="停止动画" id="stop1" />
    </div>
  </div>
  <div class="input-card" style="margin-top: 20px;">
    <label for="speed2">
      speed:&nbsp;
      <input id="speed2" type="range" min="10" max="999" step="10" value="100" />
    </label>
    <label for="distance2">
      distance:&nbsp;
      <input id="distance2" type="range" min="0" max="1000" step="10" value="0" />
    </label>
    <div style="margin-top: 20px;">
      小车2(历史单轨迹)
      <input type="button" class="btn" value="开始动画" id="start2" />
      <input type="button" class="btn" value="暂停动画" id="pause2" />
      <input type="button" class="btn" value="继续动画" id="resume2" />
      <input type="button" class="btn" value="停止动画" id="stop2" />
    </div>
  </div>
  <div class="input-card" style="margin-top: 20px;">
    <div style="margin-top: 20px;">
      小车3(实时轨迹)
      <input type="button" class="btn" value="开始动画" id="start3" />
    </div>
  </div>
  <script src="http://1.95.157.217/wmap/wmap.umd.js"></script>
  <script type="module" src="./trackPlayback.js"></script>
</body>
</html>
